<template>
  <div class="reviewBox">
    <!--着火罐 -->
    <div class="Model-one">
      <div class="titleBox">
        <span>着火罐</span>
      </div>
      <div class="flex justify-around mt-3">
        <div v-for="item in zhgList" style="width: 100px">
          <div class="text-center" style="font-size: 20px; font-weight: bolder">
            {{ item.capacity }}
          </div>
          <CyLind :v="item.volume"></CyLind>
          <div class="text-center" style="font-size: 20px; font-weight: bolder">
            {{ item.title }}
          </div>
        </div>
      </div>
      <!-- 扑救用量 -->
      <div style="font-size: 18px">
        <div class="m-2">扑救用量</div>
        <div class="flex justify-between items-center">
          <div>
            <div class="pjBox">
              <span>泡沫原液 丨</span>
              <span>338 t</span>
            </div>
            <div class="pjBox">
              <span>用水储备 丨</span>
              <span>5314 t</span>
            </div>
          </div>
          <div class="pjBox">
            <span>强度丨</span>
            <span>9812.5 L/s</span>
          </div>
        </div>
      </div>
      <div style="font-size: 18px; padding: 10px">
        <div class="m-2">冷却用水</div>
        <div class="flex justify-between items-center">
          <div class="pjBox">
            <span>用水储备 丨</span>
            <span>5314 t</span>
          </div>
          <div class="pjBox">
            <span>强度丨</span>
            <span>9812.5 L/s</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 临罐 -->
    <div class="Model-two">
      <div class="titleBox">
        <span>临罐</span>
      </div>
      <div class="flex justify-around mt-3">
        <div v-for="item in lgList" style="width: 100px">
          <div class="text-center" style="font-size: 20px; font-weight: bolder">
            {{ item.capacity }}
          </div>
          <CyLind :v="item.volume"></CyLind>
          <div class="text-center" style="font-size: 20px; font-weight: bolder">
            {{ item.title }}
          </div>
        </div>
      </div>
      <div style="font-size: 18px; padding: 10px">
        <div class="m-2">冷却用水</div>
        <div class="flex justify-between items-center">
          <div class="pjBox">
            <span>用水储备 丨</span>
            <span>5314 t</span>
          </div>
          <div class="pjBox">
            <span>强度丨</span>
            <span>9812.5 L/s</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 总量统计 -->
    <div class="Model-three">
      <div class="titleBox">
        <span>总量统计</span>
      </div>
      <div style="font-size: 18px; padding: 10px">
        <div class="flex justify-between items-center flex-wrap">
          <div class="pjBox">
            <span>泡沫原液丨</span>
            <span>338 t</span>
          </div>
          <div class="pjBox">
            <span>用水储备 丨</span>
            <span>5314 t</span>
          </div>
          <div class="pjBox mt-2">
            <span>供水强度丨</span>
            <span>502 L/s</span>
          </div>
          <div class="pjBox mt-2">
            <span>消防水枪丨</span>
            <span> 52 支</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
const zhgList = reactive([
  {
    id: 0,
    title: 'V-105A',
    capacity: 'L 14.2m',
    volume: 0.2,
  },
  {
    id: 1,
    title: 'V-105A',
    capacity: 'L 14.2m',
    volume: 0.3,
  },
])
const lgList = reactive([
  {
    id: 0,
    title: 'V-105A',
    capacity: 'L 14.2m',
    volume: 0.4,
  },
  {
    id: 1,
    title: 'V-105A',
    capacity: 'L 14.2m',
    volume: 0.5,
  },
  {
    id: 1,
    title: 'V-105A',
    capacity: 'L 14.2m',
    volume: 0.6,
  },
  {
    id: 1,
    title: 'V-105A',
    capacity: 'L 14.2m',
    volume: 0.7,
  },
])
</script>
<style lang="less" scoped>
.reviewBox {
  color: #fff;
  height: 100%;

  .Model-one {
    height: 45%;
    border: 1px solid #ccc;
    margin: 10px 0;
  }

  .pjBox {
    width: 200px;
    height: 40px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 5px;

    span {
      &:nth-of-type(1) {
        color: aqua;
      }
    }
  }

  .Model-two {
    height: 35%;
    border: 1px solid #ccc;
  }

  .Model-three {
    height: 17%;
    border: 1px solid #ccc;
    margin-top: 10px;
  }

  .titleBox {
    padding: 5px;
    background: linear-gradient(to right, #0a0909, rgba(225, 225, 225, 0));
    display: flex;
    align-items: center;
    justify-content: space-between;

    span {
      font-weight: bolder;
      font-size: 20px;
    }
  }
}
</style>
